<template>
  <div class="upshop">
    <Head title="升级微店"/>
    <div class="container">
      <div class="banner">
        <img src="../../../static/image/shopUp_bg.png" alt>
      </div>
      <div class="title_box">
        <div class="title_box_">
          <div class="title_box_top">店铺升级申请</div>
          <div class="title_box_bot">营业执照验证</div>
        </div>
      </div>

      <!-- 图片 -->
      <div class="upImage">
        <van-uploader :after-read="onRead" accept="image/png, image/jpg, image/jpeg" multiple>
          <img :src="store_qualification==''?'../../../static/image/shopUp_1.png':store_qualification" alt>
        </van-uploader>
      </div>
      <!-- 图片 end-->
      <!-- 按钮 -->
      <div class="bottom_btn">
        <span @click="update_enterprise_store_post">确认申请</span>
      </div>
      <!-- 按钮 end-->
    </div>
  </div>
</template>

<script>
import Head from "@/components/_head";
import upFile from "@/assets/js/upFile";
export default {
  data() {
    return {
      store_qualification: ""
    };
  },
  methods: {
    onRead(file) {
      let params = new FormData();
      params.append("image0", file.file);
      params.append("token", this.appJS.userInfo.token);
      params.append("os", this.appJS.config.os);
      upFile.post("user.upload_image", params, res => {
        this.store_qualification = res.data.images;
      });
    },
    update_enterprise_store_post() {
      this.appJS.ajax(
        "user.update_enterprise_store_post",
        "post",
        {
          store_id: this.appJS.getStorage("store_info").store_id,
          store_qualification: this.store_qualification
        },
        res => {
          if (res.recode == 1) {
            this.$toast("申请成功");
            setTimeout(() => {
              this.$router.go(-1);
            }, 1000);
          }
        }
      );
    }
  },
  components: {
    Head
  }
};
</script>

<style scoped lang='less'>
.upshop {
  .container {
    min-height: 100vh;
    background: #fff;
  }
  .banner {
    height: 50vw;
    width: 100%;
  }
  .title_box {
    height: 20vw;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    .title_box_top {
      font-size: 1.2rem;
      font-weight: bold;
      text-align: center;
    }
    .title_box_bot {
      font-size: 0.9rem;
      color: #888;
      text-align: center;
    }
  }
  .upImage {
    width: 100%;
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .van-uploader {
      width: 60%;
      max-width: 380px;
      max-height: 100%;
      img {
        object-fit: fill;
      }
    }
  }
  .bottom_btn {
    height: 5rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    span {
      height: 3rem;
      width: 80%;
      background: rgb(80, 152, 247);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 0.9rem;
      border-radius: 100px;
    }
  }
}
</style>
